// base
import Taro, { Component } from '@tarojs/taro'
import { View, Form, Button } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { AtActivityIndicator } from 'taro-ui'
// less
import './index.less'
import If from '../if'
import messagePush from '../../../util/messagePush'
import tool from '../../../util/tool'

@connect(
  userinfo => ({ ...userinfo }),
  dispatch => ({})
)
class Dialog extends Component {
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentWillUnmount() {
    // onUnload
  }

  componentWillReceiveProps(nextprops) {}

  delay(time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }

  formSubmit = e => {
    let { formId } = e.detail
    const { openId, userId } = this.props.userinfo
    messagePush.insertFormId({ userId, formId, openId })
  }

  onLeftOk = tool.throttle(() => {
    this.props.onLeftOk()
  })

  onOk = tool.throttle(() => {
    this.props.onOk()
  })

  render() {
    const {
      title,
      subtext,
      rightText,
      leftText,
      desc,
      onCancel,
      onOk,
      onLeftOk,
      okLoading
    } = this.props
    let isCancel = false
    if (onCancel) {
      isCancel = true
    }
    return (
      <View className="DeleteModal_id55854">
        <View className="delete-content">
          <If visible={desc}>
            <View className="content-desc">{desc}</View>
          </If>
          <If visible={title}>
            <View className="content-title">{title}</View>
          </If>
          <If visible={subtext}>
            <View className="content-text">{subtext}</View>
          </If>
        </View>
        <View className="delete-btn">
          <Form onSubmit={this.formSubmit} reportSubmit className="btn-cancel">
            <Button formType="submit" className="form-btn" onClick={onLeftOk}>
              {leftText}
            </Button>
          </Form>
          <Form onSubmit={this.formSubmit} reportSubmit className="btn-ok">
            <Button formType="submit" className="form-btn" onClick={onOk}>
              {okLoading ? <AtActivityIndicator mode='center' color="#fff" /> : rightText}
            </Button>
          </Form>
        </View>
        {/* {isCancel && <View className="close" onClick={onCancel} />} */}
      </View>
    )
  }
}

export default Dialog
